<template>
	<div>
		{{msg}}<br />
		<div>
			<el-row>
				<el-col :span="2">姚</el-col>
				<el-col :span="20">
					<el-row :gutter="10">
						<el-col>
							<el-button type="primary" @click="handleShowAdd"><i class="el-icon-plus"></i>添加</el-button>
						</el-col>
					</el-row>
					<el-row :gutter="10">
						<!--gutter-栅格间隔-->
						<el-table :data="userList" border :formatter="formatter">
							<el-table-column prop="id" label="ID"></el-table-column>
							<el-table-column prop="userName" label="用户名"></el-table-column>
							<el-table-column prop="realName" label="真实姓名"></el-table-column>
							<el-table-column prop="userPass" label="用户密码"></el-table-column>
							<el-table-column prop="gender" label="性别"></el-table-column>
							<el-table-column prop="birthday" label="生日" :formatter="formatter"></el-table-column>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<el-button @click="handleShow(scope.row)" type="text" size="small">查看</el-button>
									<el-button type="text" size="small" @click="handleShowEdit(scope.row)">编辑</el-button>
									<el-button type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination layout="total,sizes,prev,pager,next,jumper" :total="total" :page-size="pageSize" :page-sizes="[2,3,4,5,6]"
						 :current-page.sync="pageNum" @current-change="handleCurrentChange" @size-change="handleSizeChange">

						</el-pagination>
					</el-row>
				</el-col>
			</el-row>
			<!--复用对话框-->
			<el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
				<el-form :model="form" :rules="rules" ref="myForm">
					<el-form-item label="用户名" :label-width="formLabelWidth" prop="userName">
						<el-input v-model="form.userName" autocomplete="off" placeholder="请输入用户名" :disabled="disabled"></el-input>
						<!--autocomplete-原生属性，自动补全-->
					</el-form-item>
					<el-form-item label="真实姓名" :label-width="formLabelWidth" prop="realName">
						<el-input v-model="form.realName" autocomplete="off" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="密码" :label-width="formLabelWidth" prop="userPass">
						<el-input v-model="form.userPass" type="password" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="性别" :label-width="formLabelWidth" prop="gender">
						<el-radio v-model="form.gender" label="男" :disabled="disabled">男</el-radio>
						<el-radio v-model="form.gender" label="女" :disabled="disabled">女</el-radio>
					</el-form-item>
					<el-form-item label="生日" :label-width="formLabelWidth" prop="birthday">
						<el-date-picker v-model="form.birthday" placeholder="请选择生日" :disabled="disabled"></el-date-picker>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="handleSubmit">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	import {
		getUser,
		getAllUser,
		saveUser,
		updateUser,
		deleteUser
	} from '@/api/user';
	import moment from 'moment';
	export default {
		name: 'Index',
		data() {
			return {
				msg: '来啦老弟',
				user: null,
				dialogTitle: '新建用户',
				userList: [],
				pageNum: 1,
				pageSize: 2,
				total: 0,
				dialogVisible: false,
				formLabelWidth: '120px',
				form: {},
				disabled: true,
				rules: {
					userName: [{
						required: true,
						message: '用户名不能为空',
						trigger: 'blur'
					}],
					userPass: [{
						required: true,
						message: '密码不能为空',
						trigger: 'blur'
					}],
					gender: [{
						required: true,
						message: '请选择性别',
						trigger: 'blur'
					}]
				}
			}
		},
		mounted() {
			/* axios.get('http://localhost:8888/user/2').then(res => {
					  console.log(res)
					  this.user=res.data */
			getUser(2).then(res => {
				this.user = res.data
			})
			this.getUseList()
		},
		methods: {
			formatter(row) {

				return moment(row.birthday).format("YYYY-MM-DD");

			},
			getUseList() {
				getAllUser({
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then(res => {
					console.log(res.data)
					this.userList = res.data.data
					this.pageNum = res.data.pageNum
					this.pageSize = res.data.pageSize
					this.total = res.data.total
				})
			},
			handleCurrentChange(current) {
				this.pageNum = current
				this.getUseList()
			},
			handleSizeChange(size) {
				this.pageSize = size
				this.getUseList()
			},
			handleShowAdd() {
				this.disabled = false
				this.dialogTitle = '新增用户'
				this.dialogVisible = true
				this.form={}
				this.getUseList()

			},
			handleShowEdit(row) {
				this.disabled = false
				this.dialogTitle = '编辑用户'
				this.dialogVisible = true
				if (row.id) {
					getUser(row.id).then(res => {
						this.form = res.data
					})
				}

			},
			handleShow(row) {
				this.disabled = true
				this.dialogTitle = '用户详情'
				this.dialogVisible = true
				/* getUser(row.id).then(res =>{
					this.form=res.data
				}) */
				this.form = row

			},
			handleSubmit() {
				if (this.disabled === true) {
					this.dialogVisible = false
					this.form = {}
					return
				}
				this.$refs['myForm'].validate((valid) => {
					if (valid) {
						if (this.form.id) {
							updateUser(this.form).then(res => {
								this.getUseList()
								this.dialogVisible = false
								this.form = {}
							})
						} else {
							saveUser(this.form).then(res => {
								this.getUseList()
								this.dialogVisible = false
								this.form = {}
							})
						}
					} else {
						return false
					}
				})
			},
			handleDelete(id) {
				deleteUser(id).then(res => {

					this.getUseList()
				})

			}
		}

	}
</script>

<style>
	.query {
		padding-top: 20px;
		display: block;
	}
	.opt-btns {
		display: inline-block;
		height: 42px;
		line-height: 42px;
	}
</style>
